<template>
    <div @click.stop v-if="modelValue" class="float-options" :style="{left: position[0]+'px', top: position[1]+'px'}">
        <ul class="icon-list" v-if="type=='icon'">
            <li v-for="item in list" :key="item.value">
                <span @click="handleSelect(item)" class="options-item">
                    <svg-icon :name="item.icon" size="20px" />
                </span>
            </li>
        </ul>
        <ul class="text-list" v-else-if="type=='text'">
            <li @click="handleSelect(item)" v-for="item in list" :key="item.value">{{item.label}}</li>
        </ul>
        <ul class="icon-list spirit-list" v-if="type=='spirit'">
            <li v-for="item in list" :key="item.value">
                <span class="options-item">
                    <img draggable="true" @dragstart="drag($event,item)" class="spirit-img" :src="item.value" alt="">
                </span>
            </li>
        </ul>
        
    </div>
    
</template>

<script setup lang="ts">
import { defineEmits, ref, toRef, watch, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import { useEventListener } from '@/composable/common';
import type { OperationOptions } from '@/types/Design';

interface Props {
    modelValue: boolean;
    list: OperationOptions[];
    position: Array<number>;
    type?: 'icon'|'text'|'spirit';
}

const props = withDefaults(defineProps<Props>(),{
	position: ()=>[0,0],
    type: 'icon'
})
const emit = defineEmits<{
    'change': [value: string],
    'update:modelValue': [value: boolean]
}>()

function handleHide(){
    emit('update:modelValue',false)
}

function handleSelect(item){
    emit('change', item);
    handleHide();
}

function drag(e,data){
    e.dataTransfer.setData("SpiritUrl",data.value);
}

watch(()=>props.modelValue,(val)=>{
  
})

useEventListener(document,'click',handleHide);

</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.float-options{
    position: absolute;
    top: 0;
    left: 0;
    min-width: 30px;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
    .icon-list{
        display: flex;
        flex-wrap: wrap;
        li{
            padding: 5px;
            background-color: var(--el-color-info-light-9);
            margin: 3px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            &:hover{
                background-color: var(--el-color-primary-light-9);
            }
            i{
                font-size: 12px;
            }
        }
    }
    .spirit-list{
        width: 185px;
    }
    .spirit-img{
        width: 30px;
        height: 30px;
        object-fit: contain;
    }
    .text-list{
        li{
            padding: 0 12px;
            line-height: 30px;
            font-size: 12px;
            text-align: left;
            cursor: pointer;
            &:hover{
                background-color: var(--el-color-primary-light-9);
            }
        }
    }
    

}
</style>